<template>
  <div class="order">
    <div class="content">
      <div class="title">/订单管理</div>
      <div class="search">
        <el-input v-model="search" placeholder="输入订单号搜索"/>
        <el-button type="primary" @click="submitSearch">查询</el-button>
      </div>

      <el-table
        :data="orderList"
        stripe
        border>

        <el-table-column
          prop="id"
          label="id"
          align="center">
        </el-table-column>

        <el-table-column
          prop="create_time"
          label="创建时间"
          align="center"
          :show-overflow-tooltip="true">
        </el-table-column>

        <el-table-column
          prop="consumer"
          label="消费者"
          align="center"
          :show-overflow-tooltip="true">
        </el-table-column>

        <el-table-column
          prop="product"
          label="商品"
          align="center"
          :show-overflow-tooltip="true">
        </el-table-column>

        <el-table-column
          prop="num"
          label="数量"
          align="center">
        </el-table-column>

        <el-table-column
          prop="total_price"
          label="总支付"
          align="center">
        </el-table-column>

        <el-table-column
          prop="address"
          label="收货地址"
          align="center"
          :show-overflow-tooltip="true">
        </el-table-column>

        <el-table-column
          prop="order_payment_status"
          label="支付状态"
          align="center">
        </el-table-column>

        <el-table-column
          prop="distributor"
          label="分销商"
          align="center"
          :show-overflow-tooltip="true">
        </el-table-column>

      </el-table>

      <div class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-count="totalPage"
          @current-change="changePage"
          ref="pagination"
          v-if="pageShow">
        </el-pagination>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    name: 'Order',
    data() {
      return {
        search:'',
        orderList:[],
        totalPage:null,
        pageShow:true
      }
    },
    created() {
      this.getOrderList()
    },
    watch:{
      search(newVal, oldVal) {
        if (oldVal.lendth > 0 || newVal == '') {//显示全部
          this.getOrderList();
          this.pageShow = true;
        }
      }
    },
    methods: {
      submitSearch(){
        let num = Number(this.search);
        if(!num){
          this.$message.error('请输入正确的订单号数字格式');
          return
        }
        this.axios.get('/api/order/search?search='+num).then((res=>{
          if(res.data.errCode==9){
            this.$message.error(res.data.message)
          }else if(res.data.errCode==0){
            this.orderList = res.data.result.map((val,index,arr)=>{
              return {
                id:val.id,
                create_time:this.resetTime(val.create_time),
                consumer:val.consumer,
                product:val.product,
                num:val.num,
                total_price:"￥"+val.total_price,
                address:val.address,
                order_payment_status:val.order_payment_status?"支付成功":"支付失败",
                distributor:val.distributor
              }
            });
            this.pageShow = false;

          }
        })).catch(error=>{
          console.log(error)
        });
      },


      getOrderList(page){
        console.log(page);
        let url = page?'/api/order?page='+page:'/api/order';
        console.log(url);
        this.axios.get(url).then((res=>{
          console.log(res)
          if(res.data.errCode==0){
            this.totalPage = res.data.data.total_page;
            this.orderList = res.data.data.result.map((val,index,arr)=>{
              return {
                id:val.id,
                create_time:this.resetTime(val.create_time),
                consumer:val.consumer,
                product:val.product,
                num:val.num,
                total_price:"￥"+val.total_price,
                address:val.address,
                order_payment_status:val.order_payment_status?"支付成功":"支付失败",
                distributor:val.distributor==0?"无":val.distributor
              }
            })
          }
        })).catch(error=>{
          console.log(error)
        });
      },

      changePage(currentPage){
        this.getOrderList(currentPage)
      },

      resetTime(date){
        var date = new Date(date)
        var formatDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' '
          + (date.getHours()>9?date.getHours():"0"+date.getHours())
          + ':' + (date.getMinutes()>9?date.getMinutes():"0"+date.getMinutes())
          + ':' + (date.getSeconds()>9?date.getSeconds():"0"+date.getSeconds());
        return formatDate
      },
    }
  }
</script>
<style lang="less" scoped>
  .order{
    padding: 0 20px;
    .content{
      .title{
        width: 100%;
        height: 60px;
        line-height: 60px;
      }
      .search{
        margin-bottom: 20px;
        display: flex;
        .el-input{
          width: 300px;
          margin-right: 10px;
        }
      }
    }
    .page{
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
